import { useEffect } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import { UserOutlined, LockOutlined, MailTwoTone } from '@ant-design/icons';
import styles from './index.module.less';
import useLoginStore from '../loginStore.js';

export default () => {

	const getImgCaptcha = useLoginStore(state => state.getImgCaptcha);

	const loginInfo = useLoginStore(state => state.loginInfo);

	const preLogin = useLoginStore(state => state.preLogin);

	const [form] = Form.useForm();

	useEffect(()=> {
		getImgCaptcha();
	},[])

	const onFinish = value => {
		preLogin({
			...value,
			type: 'account'
		});
	};

	const handleClick = () => {
		getImgCaptcha();
	}

	const { username, password, imgCaptcha, code } = loginInfo;

	useEffect(() => {
		form.resetFields();
	}, [username, password])

	return (
		<Form
			form={form}
			initialValues={{ 
				username,
				password,
				code
			 }}
			onFinish={onFinish}
			name='account-login'
			style={{ width: '100%' }}
		>
			{/* <Form.Item
        name="tenantId"
        rules={[{ required: true, message: '请输入租户id' }]}
      >
        <Input size="large" prefix={<HomeOutlined className={styles.prefixIcon} />} placeholder="租户id：000000" />
      </Form.Item> */}
			<Form.Item
				name="username"
				rules={[
					{ required: true, message: '请输入账号' },
				]}
			>
				<Input size="large" maxLength={18} autoComplete='username' prefix={<UserOutlined className={styles.prefixIcon} />} placeholder="账号" />
			</Form.Item>
			<Form.Item
				name="password"
				rules={[
					{ required: true, message: '请输入密码' },
				]}
			>
				<Input
					prefix={<LockOutlined className={styles.prefixIcon} />}
					type="password"
					size="large"
					placeholder="密码"
					autoComplete="new-password"
				/>
			</Form.Item>
			<Row gutter={8}>
				<Col span={16}>
					<Form.Item
						name="code"
						rules={[
							{ required: true, message: '请输入验证码' },
							{ pattern: /^[A-Za-z0-9]+$/, message: '输入格式有误' },
						]}
					>
						<Input size="large" prefix={<MailTwoTone className={styles.prefixIcon} />} placeholder="请输入验证码！" autoComplete='off' />
					</Form.Item>
				</Col>
				<Col span={8}>
					{imgCaptcha && <img alt="captcha" src={imgCaptcha} className={styles.getImgCaptcha} onClick={handleClick} />}
				</Col>
			</Row>
			<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px' }}>
				<a href="#/user/forgetpw">忘记密码？</a>
				<a className="login-form-forgot" href="#/user/register">没有账号？去注册</a>
			</div>
			<Form.Item >
				<Button size="large" style={{ width: '100%' }} type="primary" htmlType="submit" className="login-form-button">
					登录
				</Button>
			</Form.Item>
		</Form>
	)
}

